<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
		请输入张三的成绩：<input type="text" v-model="score"/>
		<h1 v-if="score>=90" >成绩优秀</h1>
		<h1 v-else-if="score>=75 && score<90">成绩良好</h1>
		<h1 v-else-if="score>=60 && score<75">成绩及格</h1>
		<h1 v-else-if="score<60 && score>=0" v-show="score!= '' ">成绩不及格</h1>
		</div>
		<br />
		<div id="app2">
			<img  src="img/1.jpeg" v-show="ok"/>
			<img src="img/2.jpeg" v-show="!ok"/>
			<br />
			<input type="button" value="点我切换图片" @click="show()" >
		</div><br>
		<div id="app3">
			<h1 v-for="item1 in list1">haha我是新增的一行</h1><br />
			<button v-for="item in list">我是按钮</button><br>
			<button @click="add()" >点我增加一个按钮</button>
			<button @click.once="addline">点我新增一行标题</button>
		</div>
		<div id="app4">
			<input type="text" @keydown.caps-lock="showinfo">
			<h1 v-show="ok">当前已切换大写</h1>
		</div>
		<script>
			var vm = new Vue({
				el:"#app",
				data:{
					score:'',
				},
				methods:{
					
				}
			})
			var vm2 = new Vue({
				el:"#app2",
				data:{
					ok:false,
				},
				methods:{
					show(e){
						this.ok = !this.ok;
					}
				}
			})
			var vm3 = new Vue({
				el:"#app3",
				data:{
					list:[1],
					list1:[],
					ok:false,
				},
				methods:{
					add(){
						this.list.push("1");
					},
					addline(){
						this.list1.push("1");
					}
				}
			})
			var vm4 = new Vue({
				el:"#app4",
				data:{
					ok:false,
				},
				methods:{
					showinfo(){
						this.ok=!this.ok
					},
				}
			})
		</script>
	</body>
</html>
